﻿<script setup lang="ts" name="FullScreenWrap">
const visible = ref(false)
const title = ref('')
const isFooterShow = ref(false)
const showDialog = (v) => {
  visible.value = true
  title.value = v.title
  if (v.isFooterShow) {
    isFooterShow.value = v.isFooterShow
  }
}
// 子组件将方法暴露给父组件
defineExpose({ showDialog })
</script>

<template>
  <el-dialog :class="['full-screen-dialog', isFooterShow?'':'is-footer-hidden']" v-model="visible" :title="title" fullscreen>
    <slot />
    <template #footer>
      <div class="dialog-footer" v-if="isFooterShow">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="visible = false">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-dialog {
  .dialog-footer{
    padding: 15px var(--el-space);
  }
}
</style>
